import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    FormOutlined,
    UserOutlined,
    BarsOutlined,
    AppstoreOutlined
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Breadcrumb } from 'antd';
import { useState, useEffect } from 'react';
import { Outlet, useNavigate, useLocation, Link } from 'react-router-dom'
const { Header, Sider, Content } = Layout;
import '../style/LayoutC.css'
const LayoutC = () => {
    let { pathname } = useLocation();
    const location = useLocation();

    const pathSnippets = [pathname.substring(1)]
    console.log(pathname.substring(1));
    const getBreadItems = () => {
        return pathSnippets.map((snippet, index) => {
            const url = `/${pathSnippets[0]}`;
            const name = pathSnippets[0].split('/')[0];
            return {
                key: url,
                title: <Link to={url}>{name}</Link>
            }
        })
    }
    const breadcrumbItems = [
        {
            title: <Link to="/">首页</Link>,
            key: 'home',
        },
    ].concat(getBreadItems());

    const navigate = useNavigate()
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    function getItem(label, key, icon, children) {
        return {
            key,
            icon,
            children,
            label,
        };
    }
    const items = [
        getItem('首页', '/', <PieChartOutlined />),
        getItem('用户', '/user', <UserOutlined />),
        getItem('文章', '/articleM', <DesktopOutlined />, [getItem('文章分类', '/articleCategory', <AppstoreOutlined />), getItem('编写文章', '/articleWrite', <FormOutlined />), getItem('文章列表', '/article', <BarsOutlined />)]),

    ];

    const [selectedKeys, setSelectedKeys] = useState([]);
    useEffect(() => {
        setSelectedKeys([pathname]);
        if (pathname != '/login') {  //内部页面
            if (!sessionStorage.getItem('blogToken')) {
                navigate('/login', { replace: true })
            }
        }
    }, [pathname]);
    const onClick = (e) => {
        navigate(e.key, { replace: true })
    }
    const outLogin = () => {
        sessionStorage.removeItem('blogToken')
        sessionStorage.removeItem('blogUserId')
        sessionStorage.removeItem('blogIsBanned')
        navigate('/login')
    }
 
    return (
        <div className='mainContainer'>
            <Layout >
                <Sider trigger={null} collapsible collapsed={collapsed} style={{ minHeight: "100vh", overflow: 'hidden' }}>

                    <Menu
                        theme="dark"
                        mode="inline"
                        onSelect={({ key }) => {
                            navigate(key);
                        }}
                        selectedKeys={selectedKeys}
                        onClick={onClick}
                        items={items}
                    />
                </Sider>
                <Layout>
                    <Header
                        className='lauhead'
                        style={{
                            display: 'flex',
                            position: 'relative',
                            alignItems: 'center',
                            overflow: 'hidden',
                            background: colorBgContainer,
                        }}
                    >

                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                        <Breadcrumb items={breadcrumbItems} >
                        </Breadcrumb>
                        <Button type="text" style={{
                            position: "absolute",
                            right: '10px'
                        }} onClick={outLogin}>退出登录</Button>
                    </Header>

                    <Content
                        className='contentContainer'
                        style={{
                            margin: '24px',

                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >
                        <div style={{ padding: 24 }}>
                            { /* 二级路由出口 */}
                            <Outlet />
                        </div>

                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}
export default LayoutC;
